<template>
    <div class="footer">
        <div v-for="item in foot" :key="item" class="foot">
             <img :src="item.img" alt="" class="img">
             <p class="clear"></p>
                <ul class="uls">
                    <li v-for="item in uls" :key="item">
                         <router-link :to="{ path: item.url }" class="url"> {{item.ul}} </router-link>
                        <ul class="uls_ul">
                            <li v-for=" child in item.lis" :key="child" class="lis">
                               <router-link :to = "{path :child.url}">   
                                   <span class="float_left"> {{child.li_right}} </span>
                                  {{child.li}}
                               </router-link>
                            </li>
                        </ul>
                    </li>
                    
               </ul>
         
        </div>
        <div class="last">
                <p v-for="item in last" :key="item">
                    {{item.lasts}}
                </p>
        </div>
       
    </div>
</template>
<script>
export default {
    data(){
        return{
         foot:[{img:require("../assets/whitelogo.png")},],
         uls:[
                 {
                     ul:"首页",
                     url:"/index",
                 },
                 {
                     ul:"产品中心",
                     url:"/",
                     lis:[
                         {li:"车险"},{li:"财产险"},{li:"意外险"},{li:"工程险"},{li:"特色险"},
                      ]
                 },
                 {
                     ul:"关于我们",
                      lis:[
                         {li:"公司介绍"},{li:"企业⻛险只能测评"},{li:"iSaaS+iPaaS"}, 
                      ]
                 },
                 {
                     ul:"联系我们",
                      lis:[
                          {li:"服务热线"},
                          {li:"(⼯作⽇09:00-22:00)",li_right:"400-666-8888"},
                          {li:"合作热线"},
                          {li:" (⼯作⽇09:00-18:30)",li_right:"4200-63245888"},
                          {li:"邮箱:baoxian@jinan.com"},
                          {li:"地址:⼭东省济南市⻓清区崮云湖街道中国创新⾕"},
                      ]
                 },

             ],
            last:[
                {lasts:"©2016-2020"},
                {lasts:"华中保险（济南）有限公司"},
                {lasts:"版权所有"}, 
                {lasts:"鲁ICP备1605521号-1"}, 
            ]
        }
    },
    methods:{

    }
}
</script>
<style lang="scss">
    .footer{
           a{
            text-decoration: none;
            color: #000
          };
         
      
        background-color: #fff;
        width: 100%;
        margin-top: 100px;
        
        .foot{
            border-bottom: 1px solid #ccc;
            padding-bottom: 15px;
            overflow: hidden; 
            .clear{
               clear: both;
            }
            .img{
            width: 8%;
            float: left;
            margin-left:5%;
             }
         .uls{ 
               margin-top: 40px;
               margin-left: 5%;
               width: 50%;
               display: flex;
               justify-content: space-around;

               li{
                   text-align: left;
                   margin-top: 10px;
               }
                .uls_ul{
                    a{
                        color: #6D6D6D;
                    }

                 .lis{
     
                        padding-top: 10px;
                        line-height: 30px;
                        color: #898989;
                        font-size: 15px; 
                
                  .float_left{
                         color: #09BFDB;
                    }
             
            }
                  
                }
             }
         
        }
      .last{
          width: 38%;
          height: 50px;
          line-height: 50px;
          margin-left: 15%;
          color: #6D6D6D;
          display: flex;
          font-size: 14px;
          justify-content: space-around;
      }
    }
</style>